<template>
	<div class="flex w-full justify-between">
		<!-- 搜索框 -->
		<search-input :expanded="expanded"></search-input>
		<div class="flex">
			<!-- 所有提供商 -->
			<search-filter
				:type="type"
				:tagData="tagData"
				@update-checked-values="handleCheckedValues"></search-filter>
			<!-- 热门 -->
			<search-sort :tagData="tagData" @update-sorting-values="handleSortingValues"></search-sort>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { defineEmits } from 'vue'
import SearchInput from './sub-components/search-input.vue'
import SearchFilter from './sub-components/search-filter.vue'
import SearchSort from './sub-components/search-sort.vue'

defineOptions({ name: 'AppSearch' })

const emit = defineEmits(['update-checked-values', 'update-sorting-values'])

defineProps({
	expanded: {
		type: Boolean,
		default: true
	},
	tagData: {
		type: Object,
		default: () => ({
			id: '',
			gameTagGroupId: ''
		})
	},
	type: {
		type: String as any,
		default: ''
	}
})
const handleCheckedValues = (values: string[]) => {
	emit('update-checked-values', values)
}
const handleSortingValues = (val: any) => {
	emit('update-sorting-values', val)
}
</script>
